<template>
	<div class="div">
	<div class="div2">
		<h5>商品列表-修改</h5>
		<h6>支持2层的类型</h6>
	</div>
	<hr>
	<el-button style="background-color: #1E9FFF;color: white;margin-bottom: 3vh;margin-top: 2vh;margin-left: 2vw;"
		@click="add()">添加新的商品</el-button>
		<div class="div3">
		
			<el-table :data="book" border style="width: 100%;">
				<el-table-column prop="name" label="名称" min-width="160">
				</el-table-column>
		
				<el-table-column prop="sn" label="编号" min-width="160">
				</el-table-column>
		
				<el-table-column prop="author" label="作者" min-width="160">
				</el-table-column>
				
				<el-table-column prop="maker" label="厂家" min-width="160">
				</el-table-column>
				
				<el-table-column prop="tmake" label="日期" min-width="160">
				</el-table-column>
				
				<el-table-column prop="stock" label="库存" min-width="160">
				</el-table-column>
				
				<el-table-column prop="pic" label="图片" min-width="160">
					<template slot-scope="scope">
						<div style="width: 4vw;height: 4vw;">
							<el-avatar :src="`http://127.0.0.1:80/api/public/showimg/${scope.row.pic}`" style="width: 100%;height: 100%;"/>
						</div>
					</template>
				</el-table-column>
		
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="goUpdate(scope.row.id)">修改</el-button>
					</template>
				</el-table-column>
		
			</el-table>
			
			<el-pagination :page-size="page.lines" @current-change="move" :current-page="page.num" layout="prev, pager, next" :total="page.total">
				
			</el-pagination>
					
		</div>
		</div>
</template>

<script>
	export default {
		name:'Goods',
		data(){
			return{
				book:[],
				page: {
					num: 1,
					lines: 6,
					total: 0,
					
				},
			}
		},
		methods:{
			move(n) {
				console.log(n);
			    this.page.num=n;
				console.log(this.page.num);
			    this.getPage();
			},
			getPage(){
				this.$get("/api/adm/book/findByPage/"+this.page.num+"/"+this.page.lines).then((
				resp) => {
					console.log(resp.data);
				this.book = resp.data.data.books;
				this.page.total=resp.data.data.total;
				console.log(this.page.total);
			})
			},
			add(){
				this.$router.push({
					path: '/adm/addgoods',
					query: {
						id: this.book.id,
						act:1
					}
				});
			},
			goUpdate(id){
				this.$router.push({
					path: '/adm/addgoods',
					query: {
						id: id,
						act:0
					}
				});
			},
		},
		mounted(){
			this.getPage();
		}
	}
</script>

<style scoped>
	.div {
		width: 100%;
	}
	
	.div .div2 {
		width: 95%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 4vh auto;
	}
	
	.div .div2 h5 {}
	
	.div hr {
		width: 95%;
		margin: 1vh auto;
		border: 1px solid #1E9FFF;
	}
	.div .div3 {
		width: 95%;
		margin: 0 auto;
	}
	
	.div .div3 el-table {
		width: 100%;
		margin-top: 2vh;
	}
</style>
